<template>
    <div>
        <a-button type="primary" @click="visible = true">Open Modal</a-button>
    </div>
    <a-modal v-model:visible="visible" draggable :on-before-ok="handleSubmit" @cancel="visible = false"
        :mask-closable="false">
        <template #title>
            新增坐席账号
        </template>
        <!-- 非表单内的按钮 -->
        <!-- <a-button type="primary" @click="handleSubmit">Submit Form</a-button> -->

        <!-- 表单 -->
        <a-form :model="form" ref="formRef" :rules="rules">
            <a-form-item label="Username" field="username">
                <a-input v-model="form.username" placeholder="Please enter your username" />
            </a-form-item>
            <a-form-item label="Email" field="email">
                <a-input v-model="form.email" placeholder="Please enter your email" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
import { ref } from 'vue';
import { Message } from '@arco-design/web-vue';

export default {
    setup() {
        const visible = ref(false);
        const formRef = ref(null); // Form 的引用
        const form = ref({
            username: '',
            email: '',
        });

        // 表单校验规则
        const rules = {
            username: [{ required: true, message: 'Please enter your username' }],
            email: [
                { required: true, message: 'Please enter your email' },
                { type: 'email', message: 'Please enter a valid email' },
            ],
        };

        // 提交表单
        const handleSubmit = async () => {
            const errors = await formRef.value.validate();
            if (!errors) {
                console.log('Form values:', form.value);
                Message.success('Form submitted successfully!');
                return true;
            } else {
                return false;
            }
        };

        return {
            formRef,
            form,
            rules,
            handleSubmit,
            visible,
        };
    },
};
</script>